<!--
 * @Description: 
 * @Date: 2024-01-17 08:53:28
 * @LastEditTime: 2024-02-02 17:49:36
-->
<template>
  <el-dialog
    title="同步代表"
    :visible.sync="dialogVisible"
    class="qc-config-dialog"
    width="600px"
    :append-to-body="true"
  >
    <el-form
      :model="tongForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <p style="margin-bottom: 10px">请选择届次，同步代表到当前届次</p>
      <el-form-item prop="toId">
        <el-select
          v-model="tongForm.toId"
          placeholder="请选择届次"
          style="width: 100%"
          @change="replacePerChange($event)"
        >
          <el-option
            v-for="dict in sessionList"
            :key="dict.seId"
            :label="dict.label"
            :value="dict.seId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm"> 同步代表</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addSessionList, userSync } from "@/api/dbxx/dbxxLevel/index";
export default {
  name: "tongbuDialog",
  props: ["value", "type", "tongId"],
  data() {
    return {
      dialogVisible: false,
      sessionList: [],
      tongForm: {
        toId: "",
      },
      rules: {
        toId: [{ required: true, message: "请选择届次", trigger: "change" }],
      },
    };
  },
  created() {
    addSessionList().then((response) => {
      this.sessionList = response.rows.map((item) => {
        return {
          label:
            item.area +
            `第${item.session}届人民代表大会` +
            `第${item.orderName}次会议` +
            `(${item.annual})`,
          seId: Number(item.seId),
        };
      });
    });
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          userSync({ seId: this.tongId, toId: this.tongForm.toId }).then(
            (response) => {
              this.$message({
                message: "同步成功",
                type: "success",
              });
              this.dialogVisible = false;
            }
          );
        } else {
          return false;
        }
      });
    },
    replacePerChange(val) {
      this.$forceUpdate();
    },
  },
  watch: {
    value: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
    },
    dialogVisible(val) {
      this.$emit("input", val); //关键input
    },
  },
};
</script>

<style lang="scss" scoped></style>
